<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-11-15 10:54:03
-->
<template>
  <drawer-box>
    <template v-slot:content>
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model.trim="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="转接类型" prop="callType">
          <el-radio-group v-model="formData.callType" @change="callTypeChange">
            <el-radio label="0">转座席工号</el-radio>
            <el-radio label="1">转服务组</el-radio>
            <el-radio label="2">转直线号码</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="座席工号"
          prop="callValue"
          v-if="formData.callType === '0'"
          :rules="[{ required: true, message: '座席工号必填', trigger: 'change' }]"
        >
          <!-- <el-select v-model="formData.callValue">
            <el-option label="服务组" value="voice"></el-option>
          </el-select> -->
          <!-- <el-select-v2
            size="mini"
            v-model="formData.callValue"
            :placeholder="'请选择座席'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            clearable
            :options="userList"
            :remote="true"
            :defaultProps="{ label: 'agentNumber', value: 'agentNumber' }"
          >
          </el-select-v2> -->
          <el-cascader
            style="width: 100%"
            @change="handleChange"
            filterable
            v-model="formData.callValue"
            :options="agentCascadeList"
            :props="caProps1"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item
          label="服务组"
          prop="callValue"
          v-if="formData.callType === '1'"
          :rules="[{ required: true, message: '服务组必填', trigger: 'change' }]"
        >
          <!-- <el-select-v2
            size="mini"
            v-model="formData.callValue"
            :placeholder="'请选择服务组'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            clearable
            :options="queueList"
            :remote="true"
            :defaultProps="{ label: 'name', value: 'id' }"
          >
          </el-select-v2> -->
          <el-cascader
            style="width: 100%"
            @change="handleChange"
            filterable
            v-model="formData.callValue"
            :options="queueCascadeList"
            :props="caProps2"
          >
          </el-cascader>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="来电记忆" class="two-inline" v-if="formData.callType === '1'">
            <template v-slot:label>
              <span>
                来电记忆
                <!-- <el-tooltip
                  :show-after="500"
                  class="item"
                  effect="dark"
                  content="根据来电号码，判断有效期内，上一次此服务组接待的座席，优先指派给上一次接待座席。如果座席忙碌或者不在线，执行服务组分配规则在服务组内流转或溢出。"
                  placement="top"
                >
                  <span class="MC_iconfont MC_icon-yiwen-mian tip-span"></span>
                </el-tooltip> -->
              </span>
            </template>
            <p class="call-memory">
              <span class="tip">
                来电号码有效期内，优先指派给上一次进入此服务组接待的员工。若此员工非空闲，将按服务组分配策略在组内流转或溢出
              </span>
              <el-switch size="small" v-model="formData.callMemory"> </el-switch>
            </p>
          </el-form-item>
        </div>
        <el-form-item
          label="有效期"
          prop="memoryExpire"
          class="two-inline"
          v-if="formData.callType === '1' && formData.callMemory === true"
          :rules="[
            { required: true, type: 'number', message: '请输入1-30之间的整数', min: 1, max: 30, trigger: 'change' }
          ]"
        >
          <input-suffix class="input-suffix" suffix="天">
            <el-input type="text" v-model.number="formData.memoryExpire"> </el-input>
          </input-suffix>
        </el-form-item>
        <el-form-item
          label="直线号码类型"
          prop="lineNumberType"
          v-if="formData.callType === '2'"
          :rules="[{ required: true, message: '直线号码类型必选', trigger: 'change' }]"
        >
          <el-select v-model="formData.lineNumberType" placeholder="请选择">
            <el-option label="输入号码" value="number"></el-option>
            <el-option label="自定义参数" value="custom"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="直线号码"
          prop="callValue"
          v-if="formData.callType === '2' && formData.lineNumberType === 'number'"
          :rules="[{ required: true, message: '直线号码必填', trigger: 'change' }]"
        >
          <el-input v-model.trim="formData.callValue" size="mini"></el-input>
        </el-form-item>
        <el-form-item
          label="自定义参数"
          prop="lineNumberType"
          v-if="formData.callType === '2' && formData.lineNumberType === 'custom'"
          :rules="[{ required: true, message: '直线号码必选', trigger: 'change' }]"
        >
          <el-select v-model="formData.callValue" filterable clearable placeholder="请选择">
            <el-option v-for="item in customParametersList" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="voice" label="语音文件" prop="transferVoice">
          <template #label>
            <span class="jump-voice">
              <span>语音文件</span>
              <el-button type="primary" link @click="onJump">配置语音库</el-button>
            </span>
          </template>
          <div style="display: flex">
            <el-select-v2
              style="width: 487px"
              size="mini"
              v-model="formData.transferVoice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              clearable
              :remote="true"
              value-key="id"
              :defaultProps="{ label: 'name', value: 'id' }"
            >
            </el-select-v2>
            <Audio
              :row="{
                url: currentVoice.fileUrl
              }"
              style="margin-left: 10px"
              v-if="currentVoice.fileUrl"
            />
          </div>
        </el-form-item>
        <el-form-item :label="item.label" prop="region" v-for="(item, index) in condition" filterable :key="index">
          <template v-slot:label>
            <span>
              {{ item.label }}
              <el-tooltip :show-after="500" class="item" effect="dark" :content="tipMap[index]" placement="top">
                <span class="MC_iconfont MC_icon-yiwen-mian tip-span"></span>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="item.to" placeholder="请选择下一步节点" clearable style="width: 100%">
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:operation>
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template v-slot:remove>
      <el-button @click="deleteNode" type="danger" :icon="Delete" size="mini">删除</el-button>
    </template>
  </drawer-box>
</template>

<script lang="ts" setup>
import drawerBox from '@/app/call-center/components/drawer-box.vue'
import { withDefaults, defineProps, ref, computed, reactive, toRefs } from 'vue'
import useNodeCommon from './use-node-common'
import { cloneDeep } from 'lodash'
import { Delete } from '@element-plus/icons-vue'
import Audio from '@/common/components/audio/audio-operate.vue'
import { useRouter } from 'vue-router'
import InputSuffix from '@/common/components/input-suffix.vue'
const nodeForm = ref(null)
const props = withDefaults(
  defineProps<{
    data: any
    currentNode: any
    save: (...arg: any) => void
    cancel: () => void
    delete: (...arg: any) => void
  }>(),
  {
    data: {},
    currentNode: {}
  }
)
const {
  currentVoice,
  nodeList,
  currentData,
  labelPosition,
  rules,
  formData,
  voiceLibraryList,
  queueList,
  condition,
  userList,
  cancel,
  onSubmit,
  deleteNode
}: any = useNodeCommon({
  data: props.data,
  currentNode: props.currentNode,
  nodeForm,
  save: props.save,
  cancel: props.cancel,
  delete: props.delete
})

const tipMap: any = {
  0: '超过服务组最大排队时间溢出',
  1: '超过服务组最大排队数溢出',
  2: '服务组有无效座席时溢出，或者参数值为空时进入此节点'
}

interface State {
  caProps1: Record<string, unknown>
  caProps2: Record<string, unknown>
}

const state: State = reactive({
  caProps1: { label: 'isAgentName', value: 'agentNumber', emitPath: false },
  caProps2: { label: 'name', value: 'groupNumber', emitPath: false }
})

const router = useRouter()
const onJump = () => {
  router.push('/app/call_router/voice-library')
}
const callTypeChange = () => {
  formData.value.callValue = ''
  formData.value.callMemory = false
  formData.value.memoryExpire = 7
}

const customParametersList: any = computed(() => {
  const list =
    props.data.nodeList.find((item: any) => item.id === 'startNode').data?.customList?.filter((i: any) => i.key) || []
  list.forEach((i: any) => {
    i.name = `${i.key} ${i.memo}`
  })
  return list
})

const agentCascadeList = computed(() => {
  //  座席级联数据
  // 座席列表
  const newList = cloneDeep(userList.value) || []
  newList.forEach((i: any) => {
    i.isAgentName = `${i.agentNumber} ${i.agentName}`
  })
  //  得到开始节点中的自定义参数数据
  const customList = cloneDeep(customParametersList.value)
  customList.forEach((i: any) => {
    i.isAgentName = i.name
    i.agentNumber = i.key
  })
  const list = [
    {
      agentNumber: 'fixed',
      isAgentName: '系统座席',
      children: newList
    },
    {
      agentNumber: 'custom',
      isAgentName: '自定义参数',
      children: customList
    }
  ]
  return list
})

const queueCascadeList = computed(() => {
  // 服务组级联数据
  const customList = cloneDeep(customParametersList.value)
  customList.forEach((i: any) => {
    i._id = i.key
  })
  const list = [
    {
      key: 'fixed',
      name: '服务组',
      children: queueList.value
    },
    {
      key: 'custom',
      name: '自定义参数',
      children: customList
    }
  ]
  return customList?.length ? list : list.filter((_: any, index: number) => index === 0)
})

const handleChange = (val: any) => {
  const flag = customParametersList.value.find((i: any) => i.key === val)
  formData.value.variableType = flag ? 'custom' : 'fixed'
  formData.value.variableName = flag ? val : ''
}
// eslint-disable-next-line no-undef
defineExpose({
  form: nodeForm
})

const { caProps1, caProps2 } = toRefs(state)
</script>
<style lang="stylus" scoped>
.audioProgress
  margin 0 10px 0
.call-memory
  width: 515px;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #E6E6E6;
  padding-bottom: 20px;
  .tip
    display: inline-block;
    width: 460px;
    margin-right: 20px;
    color: rgba(0, 0, 0, 0.38);
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
.two-inline
  display: inline-block
  width 50%
.voice
  :deep(.el-form-item__label)
    padding-right 0
  // .MC_icon-qiyong-kaishi
  //   color: #d3dffd;
.input-suffix
  :deep(.el-input)
    width: 480px;
.jump-voice
  display: inline-flex !important;
  justify-content: space-between !important;
  align-items: center;
  width: 97.8% !important;
  /* margin-bottom: 9px !important; */
  padding-left: 10px;
  color: rgba(0,0,0,0.6) !important;
  padding-left: 0;
  font-weight: 500 !important;
  position: relative;

  span
    padding-left 0 !important
    font-size 14px !important
    color: rgba(0,0,0,0.6) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  :deep(.el-button span)
    color var(--mc-main-color) !important
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative;
    right: -2px;
</style>
